<template>
 	        <div class="crumbs">
 		            <el-breadcrumb separator="/">
 			                <h3 style="color #DDDDDD">当前位置:教师录入重修学生的信息</h3>
 			            </el-breadcrumb>
 		        </div>
	<el-button  class="filter-item"
			size="mini"
			type="primary"
			icon="el-icon-upload"
			 @click="open">添加</el-button>
 	<el-button class="filter-item" size="mini" type="primary" icon="el-icon-upload" @click="dialogVisible = true">批量导入
 	</el-button>
 	<el-dialog title="新增" v-model="dialogFormVisible">
 		<el-form :model="form" :rules="addFormRules" ref="addFormRef">
 			<!-- <el-form-item label="序号" label-width="100px">
 				<el-input v-model="form.pk_Id" />
 			</el-form-item> -->
 		</el-form>
 		<el-form :model="form">
 			<el-form-item label="专业" label-width="100px">
 				<el-input v-model="form.zy" />
 			</el-form-item>
 		</el-form>
 		<el-form :model="form">
 			<el-form-item label="学号" label-width="100px">
 				<el-input v-model="form.xh" />
 			</el-form-item>
 		</el-form>
 		<el-form :model="form">
 			<el-form-item label="姓名" label-width="100px">
 				<el-input v-model="form.name" />
 			</el-form-item>
 		</el-form>
 		<el-form :model="form">
 			<el-form-item label="课程编号" label-width="100px">
 				<el-input v-model="form.kcbh" />
 			</el-form-item>
 		</el-form>
 		<el-form :model="form">
 			<el-form-item label="课程名称" label-width="100px">
 				<el-input v-model="form.kcmc" />
 			</el-form-item>
 		</el-form>
 		<el-form :model="form">
 			<el-form-item label="开课院系" label-width="100px">
 				<el-input v-model="form.kkyx" />
 			</el-form-item>
 		</el-form>
 		<el-form :model="form">
 			<el-form-item label="正考学年学期" label-width="100px">
 				<el-input v-model="form.zkxnxq" />
 			</el-form-item>
 		</el-form>
 		<el-form :model="form">
 			<el-form-item label="备注" label-width="100px">
 				<el-input v-model="form.bz" />
 			</el-form-item>
 		</el-form>
 		<div class="dialog-footer">
 			<el-button @click="dialogFormVisible = false">取 消</el-button>
 			<el-button type="primary" @click="submitCheck()">确 定</el-button>
 		</div>


 	</el-dialog>
 	<el-table :data="tableData" style="width: 100%">
 		<el-table-column prop="pk_Id" label="序号" width="250">
 		</el-table-column>
 		<el-table-column prop="zy" label="专业" width="250">
 		</el-table-column>
 		<el-table-column prop="xh" label="学号" width="250">
 		</el-table-column>
 		<el-table-column prop="name" label="姓名" width="250">
 		</el-table-column>
 		<el-table-column prop="kcbh" label="课程编号" width="250">
 		</el-table-column>
 		<el-table-column prop="kcmc" label="课程名称" width="250">
 		</el-table-column>
 		<el-table-column prop="kkyx" label="开课院系" width="250">
 		</el-table-column>
 		<el-table-column prop="zkxnxq" label="正考学年学期" width="250">
 		</el-table-column>
 		<el-table-column prop="bz" label="备注" width="250">
 		</el-table-column>
 		<el-table-column prop="operation" label="操作" width="250">
 			<template #default="scope">

 				<el-button type="primary" @click="updateId(scope.row)">编辑</el-button>
 				<el-button type="danger" @click="deleteID(scope.row)">删除</el-button>
 			</template>
 		</el-table-column>
 	</el-table>
 	<el-pagination background layout="prev, pager, next" :page-size="currentPage.page" :total="currentPage.total"
 		:page-count="currentPage.count" :current-page="currentPage.current" @current-change="getpage">
 		>
 	</el-pagination>
 	<el-dialog title="批量导入" v-model="dialogVisible">
 		<el-form-item>
 			选择Excel:
 			<upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" />
 		</el-form-item>
 	</el-dialog>
 </template>
 <script>
 	import {
 		fetchDataChongxiu,
 		addChongxiu,
 		deleteChongxiu
 	} from '../api/index.js'
 	import UploadExcelComponent from '../components/UploadExcel/index.vue'
 	export default {
 		components: {
 			UploadExcelComponent
 		},
 		created() {
 			this.getdata(this.currentPage);
 		},
 		methods: {
 			beforeUpload(file) {
 				console.log(file)
 				const isLt1M = file.size / 1024 / 1024 < 1
 				if (isLt1M) {
 					return true
 				}
 				this.$message({
 					message: 'Please do not upload files larger than 1m in size.',
 					type: 'warning'
 				})
 				return false
 			},
			open() {
			    this.dialogFormVisible = true;
			    this.form.pk_Id=0;
			    this.titles='添加'
			},
 			deleteID(row) {
 				this.$confirm('确认删除?', '提示', {
 					confirmButtonText: '确定',
 					cancelButtonText: '取消',
 					type: 'warning'
 				}).then(() => {
 					deleteChongxiu(row).then(Object => {
 						this.getdata(this.currentPage);

 					})
 					this.$message({
 						type: 'success',
 						message: '删除成功!'
 					});
 				}).catch(() => {
 					this.$message({
 						type: 'info',
 						message: '已取消删除'
 					});
 				});
 			},
 			updateId(row) {
 				this.form = row;
 				this.dialogFormVisible = true;
 				this.titles = '编辑';
 			},
 			//成功
 			handleSuccess({
 				results,
 				header
 			}) {

 				var a = [];
 				var w = {};
 				for (var i = 0; i < results.length; i++) {
 					var x = JSON.parse(JSON.stringify(results[i]).replace(/序号/g, "pk_id"));
 					var y = JSON.parse(JSON.stringify(x).replace(/专业/g, "zy"));
 					var z = JSON.parse(JSON.stringify(y).replace(/学号/g, "xh"));
 					var q = JSON.parse(JSON.stringify(z).replace(/姓名/g, "name"));
 					var e = JSON.parse(JSON.stringify(q).replace(/课程编号/g, "kcbh"));
 					var r = JSON.parse(JSON.stringify(e).replace(/课程名称/g, "kcmc"));
 					var t = JSON.parse(JSON.stringify(r).replace(/开课院系/g, "kkyx"));
 					var u = JSON.parse(JSON.stringify(t).replace(/正考学年学期/g, "zkxnxq"));
 					w = JSON.parse(JSON.stringify(u).replace(/备注/g, "bz"));

 					addChongxiu(w).then(Object => {
 						this.getdata(this.currentPage);
 						this.dialogFormVisible = false;
 					})

 				}
 				this.dialogVisible = false;
 				this.$message({
 					message: '导入成功!',
 					type: 'success'
 				});
 			},

 			submitCheck() {
 				this.$refs.addFormRef.validate(valid => {
 					addChongxiu(this.form).then(Object => {
 						this.getdata(this.currentPage);
 						this.dialogFormVisible = false;
 					})
 				})

 			},
 			getpage(val) {
 				console.log(val)
 				this.currentPage.page = val;
 				this.getdata(this.currentPage);
 			},
 			getdata(val) {
 				fetchDataChongxiu(val).then(Object => {
 					this.tableData = Object.records[0];
 					this.currentPage.total = Object.rowCount;
 				})

 			},
 			handleClick(row) {
 				console.log(row);
 			},
 			page(currentPage) {
 				this.currentPage.current = currentPage;
 				this.getdata();
 			}
 		},
 		data() {
 			return {
 				total: null,
 				tableData: null,
 				dialogVisible: false,
 				dialogFormVisible: false,
 				currentPage: {
 					page: 1,
 					total: 20,
 					count: 50,
 					current: 0,
 					limit: 10
 				},
 				form: {
 					pk_Id: 0,
 					bj: '',
 					xh: '',
 					name: '',
 					kcxz: '',
 					kcbh: '',
 					kcmc: '',
 					kkyx: '',
 					zkxnxq: '',
 					bz: ''
 				},
 			}
 		}
 	}
 </script>
